<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="数据源名称" prop="connectionName" :label-width="formLabelWidth">
      <el-input v-model="form.connectionName" autocomplete="off" placeholder="请输入" maxlength="50"></el-input>
    </el-form-item>
    <el-form-item label="数据源类型" prop="connectionType" :label-width="formLabelWidth">
      <el-cascader style="width: 100%;" :props="defaultProps" :options="connectionList" :value="connectionType"
        :separator="'/'" clearable @change="handleChange">
      </el-cascader>
    </el-form-item>
    <el-form-item label="链接字符串" prop="connectionContent" :label-width="formLabelWidth">
      <el-input type="textarea" v-model="form.connectionContent" placeholder="请输入" maxlength="250"></el-input>
    </el-form-item>
    <el-form-item label="描述" prop="connectionDesc" :label-width="formLabelWidth">
      <el-input type="textarea" v-model="form.connectionDesc" placeholder="请输入" maxlength="250"></el-input>
    </el-form-item>
    <el-form-item :label-width="formLabelWidth">
      <el-button type="primary" @click="test" v-hasPermi="['bigdata:project:source:test']">测试连接</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator'
import { mapState, mapActions, mapMutations } from 'vuex'

@Component({
  computed: {
    ...mapState('EditDataSourceModal', {
      form: state => state.form,
    })
  },
  methods: {
    ...mapMutations('EditDataSourceModal', {
      setModalForm: 'SET_MODAL_FORM',
    }),
    ...mapActions({
      testConnect: 'TEST_CONNECT',
      getConnectionTypes: 'GET_CONNECTION_TYPES',
    })
  }
})

export default class DataSourceForm extends Vue {
  formLabelWidth = '120px'
  connectionList = []
  defaultProps = {
    value: 'type',
    label: 'name',
    children: 'children'
  }

  get rules() {
    return {
      connectionName: [
        { required: true, message: '请输入', trigger: 'blur' }
      ],
      connectionType: [
        { required: true, message: '请选择', trigger: 'change' }
      ],
      connectionContent: [
        { required: true, message: '请输入', trigger: 'blur' }
      ]
    }
  }

  get connectionType() {
    if (Array.isArray(this.form.connectionType)) {
      return this.form.connectionType
    } else {
      return [this.form.connectionType, this.form.jdbcType]
    }
  }

  handleChange(value) {
    this.setModalForm({ connectionType: value })
  }

  checkForm() {
    return this.$refs.form.validate()
  }

  async getDataSourceList() {
    try {
      const res = await this.getConnectionTypes()
      this.connectionList = res?.result ?? []
    } catch (e) {
      console.log(e)
    }
  }

  async test() {
    try {
      const checked = await this.checkForm()
      if (!checked) return
      this.testApi()
    } catch (err) {
      console.log(err)
    }
  }

  async testApi() {
    try {
      const params = this.getParams()
      const res = await this.testConnect(params)
      if (res.code == 100000) {
        this.msgSuccess('操作成功')
      }
      // this.checkResCode(res.code)
    } catch (e) {
      console.log(e)
    }
  }

  getParams() {
    return {
      projectId: this.$route.params.projectId,
      connectionName: this.form.connectionName,
      connectionType: this.connectionType[0],
      jdbcType: this.connectionType[1],
      connectionContent: this.form.connectionContent,
      connectionDesc: this.form.connectionDesc
    }
  }
  mounted() {
    this.getDataSourceList()
  }
}
</script>